<template>
  <div class="vue-iframe"><iframe ref="iframeContent" frameborder="0" scrolling="no" :height="iframeHeight" width="100%" :srcdoc="srcdoc"></iframe></div>
</template>

<script>
export default {
  name: 'vue-iframe',
  props: {
    content: ''
  },
  data() {
    return {
      iframeHeight: '200'
    };
  },
  computed: {
    srcdoc() {
      const base = 'http://zzgis.com';
      const { content } = this;
      return `<!DOCTYPE html>
      <html>
      <head>
      <base href="${base}">
      <link type="text/css" rel="stylesheet" href="${base}/cdn/tinymce/skins/ui/oxide/content.min.css">
      <link type="text/css" rel="stylesheet" href="${base}/cdn/tinymce/skins/content/default/content.css">
      </head>
      <body id="tinymce" class="mce-content-body" style="margin:0">
      ${content}
      </body>
      </html>`;
    }
  },
  watch: {
    content: {
      handler() {
        this.resetIframe();
      },
      immediate: true
    }
  },
  methods: {
    resetIframe() {
      let vm = this;
      setTimeout(_ => {
        var iframe = vm.$refs.iframeContent;
        try {
          var bHeight = iframe.contentWindow.document.body.scrollHeight;
          var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
          var height = Math.max(bHeight, dHeight);
          vm.iframeHeight = height;
        } catch (ex) {}
      }, 500);
    }
  }
};
</script>

<style lang="less" scoped>
.vue-iframe {
  width: 100%;
}
</style>
